<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
      .two{
        color: red;
        font-size: 45px;
        font-family: 隶书;
      }
    </style>
  <script>
    //给第一个p 添加  color: blue; font‐size: 30px; font‐family: 楷体;
    function changeCss() {
      let elementById = document.getElementById("first");
      elementById.style.color="blue";
      elementById.style.fontSize="30px";
      elementById.style.fontFamily="楷体";
    }
    //通过操作calss属性添加样式
    function changeClass() {
      let elementById = document.getElementById("second");
      elementById.className="two";
    }
  </script>
</head>
<body>
      <p id="first">
        这是第一自然段
      </p>
      <p id="second">
        这是第二自然段
      </p>
      <input type="button"  value="改变几个样式" onclick="changeCss()"/>
      <input type="button"  value="改变类样式" onclick="changeClass()"/>
</body>
</html>